<template>
  <view class="topbox" :style="'padding-top:' + statusBarHeight + 'px;'">
    <view class="topnav">
      <text>健康检测</text>
      <text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 32rpx;">我的家人</text>
      <view style="width: 112rpx; display:flex; justify-content:flex-end;">
        <image style="width:12rpx;height:24rpx;" src="../static/image/pagesHealth/right.png" mode="scaleToFill"
          @tap="family" />
      </view>
    </view>
    <view v-for="(item, index) in myhome" :key="index" class="myhome" @tap="family(item)">
      <view style="display: flex; justify-content: space-between; margin-bottom:30rpx;">
        <text>{{ item.checkedPersonName }}</text>
        <text style="margin-right: 54rpx;">详情</text>
      </view>
      <view style="display: flex; justify-content:space-between;">
        <view class="health"
          :style="{ backgroundColor: item.highBloodPressureStatus == 0 ? '#ffffff' : item.highBloodPressureStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view>
            <view style="display: flex; justify-content:space-between;">
              <text>高压</text>
              <image v-if="item.highBloodPressureStatus == 1" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/rise.png" mode="scaleToFill" />
              <image v-if="item.highBloodPressureStatus == 2" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/Low.png" mode="scaleToFill" />
              <image v-if="item.highBloodPressureStatus == 0" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/stable.png" mode="scaleToFill" />
            </view>
            <view style="display: flex; justify-content:space-between;">
              <text style="font-weight: 600;">{{ item.heartRate }}/分</text>
              <text v-if="item.highBloodPressureStatus == 0">平稳</text>
              <text v-if="item.highBloodPressureStatus == 1">过高</text>
              <text v-if="item.highBloodPressureStatus == 2">偏低</text>
            </view>
          </view>
        </view>
        <view class="healthtwo"
          :style="{ backgroundColor: item.lowBloodPressureStatus == 0 ? '#ffffff' : item.lowBloodPressureStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view>
            <view style="display: flex; justify-content:space-between;">
              <text>低压</text>
              <image v-if="item.lowBloodPressureStatus == 1" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/rise.png" mode="scaleToFill" />
              <image v-if="item.lowBloodPressureStatus == 2" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/Low.png" mode="scaleToFill" />
              <image v-if="item.lowBloodPressureStatus == 0" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/stable.png" mode="scaleToFill" />
            </view>
            <view style="display: flex; justify-content:space-between;">
              <text style="font-weight: 600;">{{ item.highBloodPressure }}mmHg</text>
              <text v-if='item.lowBloodPressureStatus == 0'>平稳</text>
              <text v-if="item.lowBloodPressureStatus == 1">过高</text>
              <text v-if="item.lowBloodPressureStatus == 2">偏低</text>
            </view>
          </view>
        </view>
        <view class="healththree"
          :style="{ backgroundColor: item.bloodGlucoseStatus == 0 ? '#ffffff' : item.bloodGlucoseStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view>
            <view style="display: flex; justify-content:space-between;">
              <text>血糖</text>
              <image v-if="item.bloodGlucoseStatus == 1" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/rise.png" mode="scaleToFill" />
              <image v-if="item.bloodGlucoseStatus == 2" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/Low.png" mode="scaleToFill" />
              <image v-if="item.bloodGlucoseStatus == 0" style="width: 32rpx; height:32rpx;"
                src="../static/image/pagesHealth/stable.png" mode="scaleToFill" />
            </view>
            <view style="display: flex; justify-content:space-between;">
              <text style="font-weight: 600;">{{ item.bloodGlucose }}mmol/L</text>
              <text v-if='item.bloodGlucoseStatus == 0'>平稳</text>
              <text v-if="item.bloodGlucoseStatus == 1">过高</text>
              <text v-if="item.bloodGlucoseStatus == 2">偏低</text>
            </view>
          </view>
        </view>
      </view>
      <view style="margin-top: 16rpx;">
        测量时间{{ item.checkTime }}
      </view>
    </view>
  </view>
</template>

<script>
let that = this
import { selectByUserId } from '@/api/health'
export default {
  data() {
    return {
      myhome: []
    }
  },
  onLoad() {
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', that.statusBarHeight);
    this.TestResults()
  },
  methods: {
    family(item) {
      uni.navigateTo({
        url: `/pagesHealth/familyArchives`,
      })
      uni.$emit('TestingDetails', item)
    },
    TestResults() {

      selectByUserId().then(res => {
        console.log('查看检测结果的数据', res)
        this.myhome = res.data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.topbox {
  width: 100vw;
  height: 100vh;
  padding: 0 27rpx;
  background-color: #F5F5F5;

  .topnav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50rpx;
    align-items: center;
  }

  .myhome {
    margin-bottom: 28rpx;
    padding: 8rpx 8rpx 20rpx 8rpx;
    background-color: #FFFFFF;
    border-radius: 12rpx;

    .health {
      width: 216rpx;
      height: 100rpx;
      background: #FEEBEB;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 16rpx 21rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      border: 1rpx solid #F5F5F5;

    }

    .healthtwo {
      width: 216rpx;
      height: 100rpx;
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 16rpx 21rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #333333;
      font-size: 24rpx;
      border: 1rpx solid #F5F5F5;
    }

    .healththree {
      width: 216rpx;
      height: 100rpx;
      background: #FBF9E9;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 16rpx 21rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      border: 1rpx solid #F5F5F5;
    }
  }
}
</style>